<template>
  <view class="ruleBox">
    <view class="ruleBox__item">
      <view class="title">积分获取规则</view>
      <view v-for="(item, index) in getList" :key="index" class="line">
        <div v-if="item.ruleType===0 && item.open">
          每日首次分享获得{{item.integralRuleParameterDtos[0].value}}点积分。
        </div>
        <div v-if="item.ruleType===1 && item.open">
          每日首次登录获得{{item.integralRuleParameterDtos[0].value}}点积分,
          第{{item.integralRuleParameterDtos[1].value}}天连续登录将额外获赠{{item.integralRuleParameterDtos[2].value}}点积分；
          第{{item.integralRuleParameterDtos[3].value}}天连续登录将额外获得{{item.integralRuleParameterDtos[4].value}}点积分。
        </div>
        <div v-if="item.ruleType===2 && item.open">
          每日首次签到获得{{item.integralRuleParameterDtos[0].value}}点积分,
          第{{item.integralRuleParameterDtos[1].value}}天连续签到将额外获赠{{item.integralRuleParameterDtos[2].value}}点积分；
          第{{item.integralRuleParameterDtos[3].value}}天连续签到将额外获得{{item.integralRuleParameterDtos[4].value}}点积分。
        </div>
        <div v-if="item.ruleType===3 && item.open">
          每到达{{item.integralRuleParameterDtos[0].value}}步数可获得{{item.integralRuleParameterDtos[1].value}}点积分。
        </div>
      </view>
    </view>
    <view class="ruleBox__item">
      <view class="title">积分抵扣规则</view>
      <view class="line">单笔消费积分抵用 = 积分*{{ratio}}%（使用额度需不高于单笔订单总额的{{ceiling}}%）</view>
    </view>
    <view class="ruleBox__item">
      <view class="title">积分使用规则</view>
      <view class="line">{{ruleOption.useRuleIntroduce}}</view>
    </view>
    <view class="ruleBox__item">
      <view class="title">积分有效期</view>
      <view class="line">积分有效期为{{ruleOption.integralValidity}}个月</view>
    </view>
    <view class="ruleBox__item">
      <view class="title">积分值规则</view>
      <view class="line">{{ruleOption.integralRuleInfo}}</view>
    </view>
  </view>
</template>

<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
  import {
    getIntegralRule,
    getLessRule
  } from "@/api/modules/integral";

  @Component({})
  export default class IntegralRule extends Vue {

    ruleOption: any = {
      useRuleIntroduce: "",
      integralValidity: "",
      integralRuleInfo: "",
    }
    getList: Array < any > = []
    ceiling: string = ""
    ratio: string = ""

    // 页面周期函数--监听页面加载
    onLoad() {
      this.getRule();
    }

    // 获取规则
    getRule() {
      const ruleOption = this.ruleOption;
      const getList = [];

      getIntegralRule({}).then(res => {
        res.forEach(item => {
          ruleOption.useRuleIntroduce = item.useRuleIntroduce;
          ruleOption.integralValidity = item.integralValidity;
          ruleOption.integralRuleInfo = item.integralRuleInfo;
          getList.push({
            integralRuleParameterDtos: item.integralRuleParameterDtos,
            integralRuleId: item.integralRuleId,
            open: item.open,
            integralShopId: item.integralShopId,
            ruleType: item.ruleType,
          });
        });
        this.setData({
          ruleOption,
          getList,
        });
      });

      getLessRule({}).then(res => {
        this.setData({
          ceiling: res.ceiling,
          ratio: res.ratio,
        });
      });
    }
  }
</script>

<style lang="scss" scoped>
  page {
    min-height: 100%;
    background-color: white;
  }

  .ruleBox {
    padding: 20px 30px;
    font-size: 13px;
    background-color: #fff;
  }

  .ruleBox__item {
    margin-bottom: 30px;
  }

  .title {
    border-left: 2rpx solid #7B7B7B;
    padding-left: 20rpx;
    color: #7B7B7B;
    margin-bottom: 10px;
  }

  .line {
    line-height: 25px;
  }
</style>